<template>
  <div class="skin-list pa-5">
    <v-row>
      <v-col
        cols="4"
        sm="2"
        lg="1"
        v-for="(skin, index) in skinList"
        :key="index"
      >
        <div
          class="
            d-flex
            flex-column
            justify-space-between
            align-center
            skin-item
          "
          :class="{ 'is-plain': isPlain }"
        >
          <img style="width: 90%" :src="skin.image_url" alt="" />

          <template v-if="isPlain || !skin.winner">
            <span style="width: 90%; font-size: 0.75rem" class="text-center text-overflow-2">{{
              skin.item_name
            }}</span>
          </template>
          <template v-else>
            <img class="skin-winner-avatar" :src="skin.winner.avatar" />
            <span>{{ skin.winner.nickname }}</span>
          </template>

          <span class="skin-price">{{ skin.price }}</span>

          <!-- 回收提示 -->
          <div class="tip d-flex align-center justify-center" v-if="!isPlain && !skin.winner">
            房主回收
          </div>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    skinList: {
      type: Array,
      default: () => [],
    },
    isPlain: {
      type: Boolean,
      default: false,
    },
  },
});
</script>

<style scoped lang="scss">
.skin-list {
  background-color: #2b2c36;
}

.skin-item {
  position: relative;
  background: #36363c;
  padding: 0.5rem;
  font-size: 12px;
  border-radius: 5px;
  height: 100%;
  color: #cac696;
  font-size: 13px;

  &.is-plain {
    &:hover {
      .skin-price {
        display: block;
      }
    }
    .skin-price {
      display: none;
    }
  }

  .skin-price {
    color: #fff;
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    padding: 0 6px;
    border-radius: 8px;
    z-index: 2;
  }

  .skin-winner-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-top: -18px;
    margin-bottom: 10px;
  }

  .tip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10;
  }
}
</style>
